.el-card img {
  width: 400px;
  height: 300px;
}

/* 博主资料 */
.blogger-information {
  border-radius: 9px;
  width: 66.5%;
  height: 72px;
  /* float: left; */
  margin-top: -33%;
  margin-left: 35%;
  margin-bottom: 5%;
}

.blogger-name {
  margin-top: -14%;
  margin-left: -11%;
  color: dimgray;
}

.blogger-nickname {
  margin-top: -8%;
  color: cadetblue;
}

/* 推荐指数 */
.recommendation {
  margin-bottom: 2%;
}

/* 头像 */
.avatar {
  margin-top: -2%;
  margin-left: -2%;
  margin-bottom: 5%;
  width: 82px;
  height: 82px;
  border-radius: 100%;
  background-image: linear-gradient(
    -225deg,
    #69eacb 0%,
    #eaccf8 48%,
    #6654f1 100%
  );
  background-blend-mode: normal, multiply;
}

.avatar-photo {
  margin-top: 4.5%;
  margin-left: 4.5%;
}

/* 博客流量信息栏 */
.blog-stream {
  margin-left: 2%;
  margin-bottom: 2%;
  font-size: 15px;
  font-family: "Heiti";
}

/* 博客流量信息栏2 */
.blog-stream-two {
  margin-left: 2%;
  margin-bottom: 2%;
  font-size: 15px;
  font-family: "Heiti";
}

/* 博客流量栏分割线 */
.el-divider {
}

/* 博客流量的各个栏 */
.fans,
.praise,
.commentnum,
.browernum {
  padding-left: 6.45%;
  padding-right: 6.45%;
}

/* 博客流量的各个栏2 */
.collect,
.visit,
.ranking,
.original {
  padding-left: 6.45%;
  padding-right: 6.45%;
}

/* 博客流量数量 */
.tag-group {
  margin-left: 0.4%;
  margin-top: 3%;
}

/* 博客流量数量2 */
.tag-group-two {
  margin-left: 0.4%;
  margin-top: 3%;
}

/* 博客各个流量数量框 */
.fansfans,
.praisepraise,
.commentnumcommentnum,
.browernumbrowernum,
.collectcollect,
.visitvisit,
.rankingranking,
.originaloriginal {
  width: 25%;
}

/* 名言框 */
.blog-wisdom-card {
  border-radius: 15px;
  margin-top: 5%;
  width: 100%;
  background-color: rgba(208, 198, 198, 0.1);
  border-top: 5px double rgb(97, 208, 233);
  border-bottom: 5px double rgb(239, 188, 188);
  border-left: 6px double rgb(198, 164, 223);
  backdrop-filter: blur(10px);
  font-family: "KaiTi";
  color: rgb(255, 255, 255);
  border-radius: 8px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.wisdom-title {
  margin-top: -1%;
}

/* 博客推荐 */
.recommend {
  border-radius: 5px;
  border: 3px double #afd9de;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 2%;
  padding-bottom: 2%;
  margin-top: -6.5%;
  margin-bottom: -8.5%;
  margin-right: -8%;
  margin-left: -7%;
  font-size: 15px;
  background-color: rgb(255, 255, 255);
  border-top: 3px double rgb(97, 208, 233);
  border-bottom: 3px double rgb(239, 188, 188);
  border-left: 3px double rgb(198, 164, 223);
}

.recommend-card {
  border-radius: 9px;
  margin-top: 4%;
  margin-bottom: 4%;
  background-image: linear-gradient(
    -225deg,
    #8bdedc 0%,
    #c5c1ff 56%,
    #ffbac3 100%
  );
}

/* 推荐区 */
.blog-recommend {
  border-radius: 15px;
  margin-top: 5%;
  width: 100%;
  /* height: 50%; */
  background-color: rgba(208, 198, 198, 0.4);
  border-top: 5px double rgb(97, 208, 233);
  border-bottom: 5px double rgb(239, 188, 188);
  border-left: 6px double rgb(198, 164, 223);
}

/* 搜索框 */
.blog-search-card {
  margin-top: 5%;
  width: 100%;
  /* height: 6%; */
}

/* 博客标签 */
.blog-tag {
  margin-bottom: 2%;
}

.tag1,
.tag2,
.tag3,
.tag4,
.tag5 {
  margin-right: 2%;
}

/* 博客标题 */
.title {
  font-size: 15px;
  margin-top: -2%;
  margin-bottom: -2%;
}

/* 博客数据 */
.blog-data-card {
  border-radius: 15px;
  width: 100%;
  height: 30%;
  background-color: rgba(208, 198, 198, 0.6);
  border-top: 5px double rgb(97, 208, 233);
  border-bottom: 5px double rgb(239, 188, 188);
  border-left: 6px double rgb(198, 164, 223);
  backdrop-filter: blur(10px);
}

.search {
  margin-top: 3.5%;
  margin-left: 7%;
  width: 85%;
}

/* 博客数据、目录...父级盒子 */
.blog-data-box {
  float: left;
  width: 23%;
  /* height: 1000px; */
  /* background-color: rgb(174, 152, 145); */
}

/* 发送评论按钮 */
.comment-btn {
  margin-left: 3%;
}

/* 评论输入框 */
.usercomment {
  margin-top: 2%;
  border-radius: 7.5px;
  border-top: 3.5px double rgb(97, 208, 233);
  border-bottom: 3.5px double rgb(239, 188, 188);
  border-left: 3.5px double rgb(198, 164, 223);
}

/* 用户评论区父级盒子 */
.blog-comment-card {
  border-radius: 15px;
  margin-top: 1.5%;
  /* margin-bottom: 5%; */
  width: 100%;
  /* height: 50%; */
  background-color: rgba(208, 198, 198, 0.2);
  border-top: 3.5px double rgb(97, 208, 233);
  border-bottom: 3.5px double rgb(239, 188, 188);
  border-left: 3.5px double rgb(198, 164, 223);
  backdrop-filter: blur(10px);
}

/* 用户评论区 */
.user-comment-card {
  border-radius: 12px;
  margin-top: 1.5%;
  margin-bottom: 1.5%;
  /* background-color: rgba(208, 198, 198, 0.1); */
  border-top: 3.5px double rgb(97, 208, 233);
  border-bottom: 3.5px double rgb(239, 188, 188);
  border-left: 3.5px double rgb(198, 164, 223);
  backdrop-filter: blur(10px);
  background-color: #fff7f7;
}

.user-comment {
  margin-top: -1%;
  margin-bottom: -1%;
}

/* 博客所属栏目标签 */
.appArticleClassName {
  margin-bottom: 1%;
  margin-left: 1%;
}

.column {
  margin-top: 1%;
}

/* 博客标题 */
.title {
  height: 20%;
  width: 100%;
}

/* 博客详情 */
.blog-card {
  border-radius: 15px;
  width: 100%;
  background-color: rgba(208, 198, 198, 0.7);
  border-top: 4px double rgb(97, 208, 233);
  border-bottom: 4px double rgb(239, 188, 188);
  border-left: 4px double rgb(198, 164, 223);
  backdrop-filter: blur(10px);
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

/* 博客详情父级盒子 */
.blog-box {
  float: left;
  width: 75.5%;
  /* height: 100%; */
  /* background-color: rgb(91, 82, 78); */
  margin-left: 1.5%;
}

/* 博客详情 */
.content-card {
  background-color: #ececec;
  border-top: 3.5px double rgb(97, 208, 233);
  border-bottom: 3.5px double rgb(239, 188, 188);
  border-left: 3.5px double rgb(198, 164, 223);
  border-radius: 12px;
}

/* 博客详情页总盒子 */
.blog-big-box {
  width: 1350px;
  /* height: 1000px; */
  /* background-color: rgb(206, 197, 197); */
  margin-left: 6.2%;
}

/* 博客详情页头 */
.blog-header {
  width: 100%;
  /* height: 7%; */
  /* background-color: dimgrey; */
  padding-top: 1%;
}

/* 用户操作点赞、转发、收藏、举报盒子 */
.operation {
  margin-top: 1.5%;
  margin-bottom: -0.5%;
  margin-left: 14.5%;
}

.praise-btn,
.collect-btn,
.transmit-btn,
.report-btn {
  margin-right: 3%;
  border-top: 3.5px double rgb(97, 208, 233);
  border-bottom: 3.5px double rgb(239, 188, 188);
  border-left: 3.5px double rgb(198, 164, 223);
}

/* 页头封面 */
.header-photo {
  width: 100%;
  height: 100%;
}

/* 博客详情以及博客数据、目录...两个盒子 */
.blog-box,
.blog-data-box {
  margin-top: 1.5%;
}

/* 设置取消所有卡片的边距 */
.el-card__body,
.el-main {
  padding: 0%;
  margin: 0%;
}

/* 分隔栏 */
.el-divider {
  margin: 0%;
  padding: 0%;
}

/* 总盒子 */
.app {
  position: relative;
  z-index: -1;
  background-color: rgb(22, 21, 31);
  height: 100%;
}

/* <!-- 到底了提示父级盒子 --> */
.bottomtipbox {
  float: left;
  position: relative;
  z-index: 1;
  margin-left: 2.85%;
  margin-top: 5%;
  border-radius: 15px;
  /* background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); */
  width: 95%;
  /* background-color: #dbd0e8; */
}

/* 到底了提示框 */
.bottom-tip {
  text-align: center;
  font-size: larger;
  color: #99a9bf;
  border-bottom: double #b5c6dc;
  border-radius: 25px;
}

/* 到底了提示文字 */
.bottomtext {
  background: linear-gradient(#b6c0d0, #a4b7d1, #99a9bf);
  -webkit-background-clip: text;
  color: transparent;
  /* font-size: 25px; */
  /* font-weight: bold; */
}

/* 文章标题右边logo特效 */
.title-right {
  /* background-color: #66acf3; */
  width: 400px;
  height: 25px;
  z-index: 100;
  position: absolute;
  top: 21px;
  left: 83%;
  transform: translate(-50%, -50%);
}

.title-right-text {
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  text-transform: uppercase;
  transform: translateY(-50%);
  text-shadow: 0px 5px 5px rgb(133, 126, 126);
  mix-blend-mode: overlay;
  /* font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: rgb(90, 72, 72);
  text-shadow: 0 1px 1px #3f4657, 0 5px 5px #6e7482; */
}

.title-right-text::before,
.title-right-text::after {
  content: "";
  padding: 12px 12px; /* 扩大内边距 */
  position: absolute;
  left: 94%;
  top: 63.5%;
  transform: translate(-50%, -50%);
  width: 6.8%;
  height: 6.8%;
  animation: rightroll 10s linear infinite;
}

.title-right-text::before {
  border-top: 9px solid #66acf3; /* 绘制上方右方的边框 */
  border-right: 9px solid #90aac4;
  z-index: -1; /* 将before向后调整 */
}

.title-right-text::after {
  border-bottom: 9px solid #659dd6; /* 绘制下方左方的边框 */
  border-left: 9px solid #5283b4;
  box-shadow: 0.4px 0.4px 5px #878787;
}

@keyframes rightroll {
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}
